<!--传入headContent表头 (数组)-->
<!--传入updateTime列表刷新时间-->
<!--传入listData列表数据-->
<!--传入列表类型 listType 'a' or 'b'  or 'c'...-->
<template>
  <div id="details" :class=ctrlClass>
    <!--列表标题-->
    <h1 class="detail-title">
      <slot></slot>
      <span class="update-time">{{updateTime}}</span>
    </h1>

    <!--列表头-->
    <h2 class="subtitle">
      <a v-for="(val,index) in headContent" :key="index">{{val}}</a>
    </h2>

    <!--列表-->
    <div style="position: relative">
      <list-shade v-if="listData.length==0"></list-shade>
      <ul class="details">
        <li @click="toStkDetail(item.strStkCode)" v-if="listType=='d'&&index<min" :class="[{borderBtm:ctrlBorderStyle(index)}]" v-for="(item,index) in listData" :key="index">
          <a class="inflow-object">
            <span class="name">{{item.strName}}</span>
            <span class="code">{{item.strStkCode}}</span>
          </a>
          <span :class="['price', 'red1',{green:down == 1}]">{{item.nPrice / 10000 | numFix2}}</span>
          <span :class="['price','red2',{green:down == 1}]">{{item.n1Rate / 100 | numFix2}}%</span>
          <a :class="['inflows',{red2:item.n2Rate > 0 || (down == 0 && item.n2Rate == 0), green:item.n2Rate < 0 || (down == 1 && item.n2Rate == 0)}]">{{item.n2Rate / 100 | numFix2}}%</a>
        </li>
        <li @click = "toStkDetail(item.strCode)" v-if="listType=='c'&&index<min" :class="[{borderBtm:ctrlBorderStyle(index)}]" v-for="(item,index) in listData" :key="index">
          <a class="inflow-object">
            <span class="name">{{item.strName}}</span>
            <span class="code">{{item.strCode}}</span>
          </a>
          <a :class="['current' ,{'rise':item.nAmount>0},{'decline':item.nAmount<0}]">
            <span class="price">{{item.nPrice}}</span>
            <span class="up-down">
                <b class="gainPrice">{{item.nAmount>0?'+':''}}{{item.nAmount}}</b>
                <b class="gainPer">{{item.nRate>0?'+':''}}{{item.nRate}}%</b>
              </span>
          </a>
          <a class="inflows">{{item.netFlowIn | largeNumFormat}}</a>
        </li>
        <li @click = "toStkDetail(item.strCode)" v-if="listType=='b'&&index<min" :class="[{borderBtm:ctrlBorderStyle(index)}]" v-for="(item,index) in listData" :key="index">
          <a class="name-code">
            <span class="name">{{item.strName}}</span>
            <span class="code">{{item.strCode}}</span>
          </a>
          <a class="finance">
            {{item.rzAmount | largeNumFormat}}
          </a>
          <a class="margin">{{item.rqAmount | largeNumFormat}}</a>
        </li>
        <li  @click = "toStkDetail(item.strCode)" v-if="listType=='a'&&index<min" :class="[{borderBtm:ctrlBorderStyle(index)}]" v-for="(item,index) in listData" :key="index">
          <a class="name-code">
            <span class="name">{{item.strName}}</span>
            <span class="code">{{item.strCode}}</span>
          </a>
          <a class="num">
            {{item.amount}}
          </a>
          <a class="scale">{{item.persentage}}%</a>
          <a class="marketVal">{{item.current}}</a>
        </li>
      </ul>
      <p class='load-more' @click="loadMore" v-if="listData.length > 3">
        <a :class="{openState:!close}">{{close?'展开查看更多':'收起'}}</a>
      </p>
    </div>
  </div>
</template>
<script>
  import { largeNumFormat, numFix2 } from '@/filters/num'
  import listShade from '@/components/common/ListShade'

  export default{
    name: 'detail-list',
    components: {
      listShade
    },
    data () {
      return {
        close: true,
        open: false,
        min: 3,
        max: 10
      }
    },
    props: {
      headContent: {
        type: Array,
        default: function () {
          return ['item1', 'item2', 'item3']
        }
      },
      updateTime: '',
      listType: '',
      listData: '',
      down: ''
    },
    filters: {
      largeNumFormat,
      numFix2
    },
    methods: {
      ctrlBorderStyle(index) {
        return this.listData.length > 3 ? this.close ? index != 2 ? 1 : 0 : index == this.listData.length - 1 ? 0 : 1
          : index == this.listData.length - 1 ? 0 : 1
//        if (this.listData.length > 3) {
//          return this.close ? index != 2 ? 1 : 0 : index == this.listData.length - 1 ? 0 : 1
//        } else {
//          return index == this.listData.length - 1 ? 0 : 1
//        }
      },
      loadMore() {
        let tmp = this.min;
        this.min = this.max;
        this.max = tmp;
        this.close = !this.close;
        this.open = !this.open;
      },
      toStkDetail(stkCode) {
        window.location.href = '@min=' + `${stkCode.toString().indexOf('6') == 0 ? 'SH' : 'SZ'}${stkCode}`;
      }
    },
    computed: {
      ctrlClass() {
        return 'style' + this.listType.toUpperCase()
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/cssReset';
  @import '../../assets/css/variables';
  .styleA{
    .num,.scale,.marketVal{
      font:.16rem/.36rem Helvetica;
      color: #555;
    }
    .detail-title{
      text-align: left;
      .update-time{
        float: left;
        padding-left: .15rem;
      }
    }
  }     //解禁市值
  .styleB{
    .detail-title{
      text-align: left;
      .update-time{
        float: left;
        padding-left: .15rem;
        display: inline-block;
        width: 1.53rem;
        text-align: right;
      }
    }
    .details{
      .finance,.margin{
        font:.16rem/.3rem Helvetica;
        color: #555;
      }
    }
  }     // 融资余额
  .styleC{
    .detail-title{
      padding: 0 .15rem;
      text-align: left;
      .update-time{
        font-size: .12rem;
        font-family: PingFangSC;
        color: #999;
      }
    }
    .details{
      li{
        .current{
          display: flex;
          flex-direction: column;
          .price{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            font: .16rem/1 Helvetica;
          }
          .up-down{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            font: .1rem/1 Helvetica;
            b{
              padding:0 .04rem;
            }
          }
        }
        .rise{
          color: #eb333b;
        }
        .decline{
          color: #1aae52;
        }
        .inflows{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font: .2rem/1 Helvetica;
          color: #eb333b;
        }
      }
    }
  }   // 沪/深股通  列表样式 特性
  .styleD{
    .price,.inflows{
      font-size: .2rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
    }
    .price{
      justify-content: center;
    }
    .red1{
      color: #e84b4b;
    }
    .red2{
      color: #eb333b;
    }
    .green{
      color: #1aae52;
    }
  }

  //-----各类列表可通用样式----//
  .detail-title{
    background: #fff;
    font: .16rem/.48rem PingFang-SC;
    color: #222222;
  }
  .subtitle{
    padding: 0 .15rem;
    display: flex;
    background: #fafafa;
    font:.12rem/.3rem PingFang-SC;
    a{
      flex: 1;
      color: #787878;
    }
    a:first-child{
      text-align: left;
    }
    a:last-child{
      text-align: right;
    }
  }
  .details{
    padding: 0 .15rem;
    min-height: .55rem;
    .borderBtm{
      border-bottom: 1px #ddd solid;
    }
    li{
      padding: .06rem 0;
      width: auto;
      height: .4rem;
      display: flex;
      justify-content: space-between;
      a{
        flex: 1;
      }
      a:first-child{
        display: flex;
        flex-direction: column;
        text-align: left;
      }
      a:last-child{
        text-align: right;
      }
      .name{
        display: flex;
        align-items: flex-end;
        flex: 1;
        font: .15rem/1 PingFang-SC bold;
        color: #222;
      }
      .code{
        display: flex;
        align-items: center;
        flex: 1;
        font: .09rem/1 "HelveticaNeue";
        color: #999;
        margin-top: .05rem;
      }
    }
  }
  .load-more{
    a{
      &:after{
        transition: .3s ease all;
      }
    }
    a.openState{
      &:after{
        transform: rotate(180deg);
      }
    }
  }
</style>
